<template>
  <div ref="gantt" class="gantt-box"></div>
</template>

<script>
import * as d3 from "d3";

export default {
  data() {
    return {
      // data: [
      //   {
      //     name: "华夏银行股份有限公司",
      //     start: "2013-02",
      //     end: "2014-08",
      //     fill: "#732f4e",
      //     borderColor: "#fb5493",
      //     title: "项目经理"
      //   },
      //   {
      //     name: "字节跳动",
      //     start: "2014-08",
      //     end: "2015-08",
      //     fill: "#3b3d50",
      //     borderColor: "#3442ff",
      //     title: "市场总监"
      //   },
      //   {
      //     name: "腾讯",
      //     start: "2015-08",
      //     end: "2016-08",
      //     fill: "#3b3d50",
      //     borderColor: "#16ac02",
      //     title: "市场总监"
      //   },
      //   {
      //     name: "阿里",
      //     start: "2016-08",
      //     end: "2017-11",
      //     fill: "#3b3d50",
      //     borderColor: "#36a9ff",
      //     title: "市场总监"
      //   }
      // ]
    };
  },
  methods: {
    buildChart(val = []) {
      let data = [];
      let color = [
        ["#3b3d50", "#36a9ff"],
        ["#3b3d50", "#16ac02"],
        ["#3b3d50", "#3442ff"],
        ["#732f4e", "#fb5493"],
      ];

      val.forEach((r, index) => {
        let randomColorArr =
          index < 4 ? color[index] : color[Math.floor(Math.random() * 4)];
        data.push({
          ...r,
          fill: randomColorArr[0],
          borderColor: randomColorArr[1],
        });
      });
      this.d3Chart(data);
    },
    d3Chart(data) {
      let w = this.$refs["gantt"].clientWidth;
      let h = this.$refs["gantt"].clientHeight;
      let margin = { left: 50, top: 20, right: 28, bottom: 50 };
      let svg = d3
        .selectAll(".gantt-box")
        .append("svg")
        .attr("class", "svg")
        .attr("width", w)
        .attr("height", h);

      let timeParse = d3.timeParse("%Y-%m");
      let timeFormat = d3.timeFormat("%Y-%m");

      let timeScale = d3
        .scaleTime()
        .domain([
          d3.min(data, function(d) {
            return timeParse(d.startDate);
          }),
          d3.max(data, function(d) {
            return timeParse(d.endDate);
          }),
        ])
        .range([0, w - (margin.left + margin.right)]);
      let xAxis = d3
        .axisBottom(timeScale)
        .ticks(5)
        .tickFormat((d) => {
          return timeFormat(d);
        });
      svg
        .append("g")
        .attr("class", "xAxis")
        .style(
          "transform",
          `translate(${margin.left}px, ${h - margin.bottom}px)`
        )
        .call(xAxis);

      //let height = (h - margin.bottom) / data.length;
      let height = (h - margin.bottom) / 5;
      let series = d3
        .selectAll(".gantt-box")
        .selectAll("div")
        .data(data)
        .enter()
        .append("div")
        .attr("class", "series")
        .style("left", function(d) {
          return timeScale(timeParse(d.startDate)) + "px";
        })
        .style("top", function(d, i) {
          return i * height + "px";
        })
        .style("border-color", (d) => d.borderColor)
        .style("width", function(d) {
          let v =
            timeScale(timeParse(d.endDate)) - timeScale(timeParse(d.startDate));
          return v + "px";
        })
        .style("background-color", (d) => d.fill)
        .style("height", height + "px");

      series
        .append("div")
        .attr("class", "series-name")
        .text((d) => d.name);
      series
        .append("div")
        .attr("class", "series-title")
        .text((d) => d.title);
    },
  },
  mounted: function() {},
  components: {},
};
</script>
<style lang="scss">
.gantt-box {
  width: 100%;
  height: 220px;
  border-bottom: 4px solid #5a6eff;
  position: relative;
  .series {
    position: absolute;
    border-radius: 0 10px 10px 0;
    border-left: 4px solid;
    display: flex;
    justify-content: center;
    padding: 0 10px;
    flex-direction: column;
    .series-name {
      color: #fff;
      font-size: 14px;
    }
    .series-title {
      color: #cdcdcd;
      font-size: 12px;
    }
  }
  .svg {
    .xAxis {
      // > .tick {
      //   transform: rotate(21deg);
      // }
      .domain {
        display: none;
      }
      .tick {
        text {
          fill: #787dab;
          font-size: 15px;
          transform: rotate(21deg);
        }
      }
    }
  }
}
</style>
